<template>
  <button
    @click="toggleChat"
    :class="[
      'fixed top-4 right-4 z-50 w-10 h-10 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center',
      isChatOpen 
        ? 'bg-gradient-to-br from-[#ff79c6] to-[#bd93f9] hover:from-[#ff6bb3] hover:to-[#a855f7]' 
        : 'bg-gradient-to-br from-[#50fa7b] to-[#8be9fd] hover:from-[#4ade80] hover:to-[#7dd3fc]'
    ]"
    :title="isChatOpen ? '关闭AI助手' : '打开AI助手'"
  >
    <svg v-if="!isChatOpen" class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
    </svg>
    <svg v-else class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  questionId?: number
  sessionType?: string
}

const props = withDefaults(defineProps<Props>(), {
  sessionType: 'question'
})

const emit = defineEmits<{
  toggle: []
}>()

const isChatOpen = ref(false)

const toggleChat = () => {
  isChatOpen.value = !isChatOpen.value
  emit('toggle')
}
</script>
